<template>
	<view class="qx-box" id="qx-view">
		<page-head :transparent='false'>
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
		</page-head>
		<view class="img-box">
			<image :src="qxBanner" mode="widthFix"></image>
		</view>
		<view class="qxList" v-for="(item, i) in qxImgList" :key="i">
			<image :src="item.img" mode="widthFix" @click="linkTo(item.url, i)"></image>
		</view>
		<view class="img-box">
			<image :src="qxBottom" mode="widthFix"></image>
			<view class="mock" @click="btnClick"></view>
		</view>
	</view>
</template>

<script>
	
	import qxBanner from '../../static/img/qx/qxBanner.png'
	import qxBottom from '../../static/img/qx/qxBottom.png'
	
	import qx1 from '../../static/img/qx/qx1.png'
	import qx2 from '../../static/img/qx/qx2.png'
	import qx3 from '../../static/img/qx/qx3.png'
	import qx4 from '../../static/img/qx/qx4.png'
	import qx5 from '../../static/img/qx/qx5.png'
	import qx6 from '../../static/img/qx/qx6.png'
	import qx7 from '../../static/img/qx/qx7.png'
	import qx8 from '../../static/img/qx/qx8.png'
	import qx9 from '../../static/img/qx/qx9.png'
	import qx10 from '../../static/img/qx/qx10.png'
	import qx11 from '../../static/img/qx/qx11.png'
	import qx12 from '../../static/img/qx/qx12.png'
	import qx13 from '../../static/img/qx/qx13.png'
	
	export default {
		data() {
			return {
				title: '七夕活动',
				qxBanner: qxBanner,
				qxBottom: qxBottom,
				qxImgList: [
					{
						img: qx1,
						url: '../selfdetail/selfdetail?skuId=7616&cid=413&title=成人充电式防水声波便携式电动牙刷情侣配套&seller=好品购'
					},
					{
						img: qx2,
						url: '../selfdetail/selfdetail?skuId=7532&cid=98&title=迪奥（Dior）魅惑清新淡香水/女士淡香水 50ml&seller=好品购'
					},
					{
						img: qx3,
						url: '../selfdetail/selfdetail?skuId=7526&cid=385&title=罗西尼(ROSSINI)手表钟表雅尊商务系列时尚腕表简约优雅自动机械表女士手表718752G01B&seller=好品购'
					},
					{
						img: qx4,
						url: '../selfdetail/selfdetail?skuId=7529&cid=338&title=飞利浦（PHILIPS）男士电动剃须刀全身水洗剃胡刀胡须刀刮胡刀智能清洁S5551/27&seller=好品购'
					},
					{
						img: qx5,
						url: '../selfdetail/selfdetail?skuId=7530&cid=474&title=七夕情人节礼物 七匹狼男腰带礼盒套装 头层牛皮短款男士钱包+自动扣牛皮皮带时尚送礼精装礼盒L2704&seller=好品购'
					},
					{
						img: qx6,
						url: '../selfdetail/selfdetail?skuId=7533&cid=678&title=漫步者（EDIFIER）TWS2 真无线蓝牙耳机 运动耳机 迷你入耳式手机耳机 通用苹果华为小米手机  黑色&seller=好品购'
					},
					{
						img: qx7,
						url: '../selfdetail/selfdetail?skuId=3588&cid=278&title=梦妆 （Mamonde）蔷薇柔光无瑕气垫霜 21（自然色）14g&seller=京东自营'
					},
					{
						img: qx8,
						url: '../selfdetail/selfdetail?skuId=7528&cid=92&title=御泥坊 亮颜保湿补水面膜21片（提亮肤色 晒后修护 男女护肤品化妆品套装 玻尿酸面膜）&seller=好品购'
					},
					{
						img: qx9,
						url: '../selfdetail/selfdetail?skuId=7535&cid=1134&title=【京东JOY定制款】宝路狗粮 宠物狗零食 软包狗罐头 幼犬全价妙鲜包 牛肉鸡肉混合口味 85*12整盒装&seller=好品购'
					},
					{
						img: qx10,
						url: '../selfdetail/selfdetail?skuId=7527&cid=279&title=卡姿兰（Carslan）金致胶原轻雾感唇膏&seller=好品购'
					},
					{
						img: qx11,
						url: '../selfdetail/selfdetail?skuId=7531&cid=404&title=HELLO KITTY创意镜子礼盒装 生日礼物女生七夕情人节礼物送女友送老婆 便携随身小镜子化妆镜甜蜜蜜KT1606&seller=好品购'
					},
					{
						img: qx12,
						url: '../selfdetail/selfdetail?skuId=7536&cid=417&title=倍轻松（breo）足疗机按摩器 脚部足部足底按摩器 足疗器足疗仪&seller=好品购'
					},
					{
						img: qx13,
						url: '../selfdetail/selfdetail?skuId=7539&cid=711&title=Frigga 弗瑞嘉葡萄籽油500ml  意大利原装进口 物理压榨 送礼 烹饪烘焙&seller=好品购'
					}
				]
			}
		},
		onLoad() {
			window.genCommonData()
		},
		methods: {
			async linkTo(url, i) {
				if (url !== '') {
					onEvent('page_home_top_banner2_goods' + (parseInt(i) + parseInt(1)));
					await this.pro(url)
				}
			},
			pro(url) {
				return new Promise(function(resolve, reject) {
					if (url !== '') {
						h5NavigateTo({
							url: decodeURI(url)
						});
						resolve(true)
					}
				})
			},
			btnClick () {
				document.getElementById("qx-view").scrollIntoView({block: "start", behavior: "smooth"});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.qx-box{
		width: 100%;
		scroll-behavior: smooth;
		
		.img-box{
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			position: relative;
			
			image{
				width: 100%;
				display: block;
			}
			
			.mock{
				position: absolute;
				bottom: 14%;
				left: 37%;
				width: 200px;
				height: 60px;
				// background: red;
				z-index: 10;
			}
		}
		.qxList{
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			
			image{
				width: 100%;
				display: block;
			}
		}
	}
</style>
